<template>
  <div style="width: 1000px;">
    <el-row :gutter="10" style="width: 100%;">
      <el-col :span="16">
        <div style="background-color: white;height: 700px;">
          <div class="setup">
            <h3 style="color: black;margin: 0 0 10px 0">偏好设置</h3>
            <span style="font-size: 14px">图片水印/快捷键</span>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">图片水印</h4>
                <span>
                  在我上传的图片上显示水印
                </span>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="16">
                <h4 style="color: black;margin: 0 0 10px 0">快捷键</h4>
                <span>
                  更加方便地浏览知乎，按 ?（Shift + /）查看所有快捷键
                </span>
              </el-col>
              <el-col :span="3" :offset="5">
                <p style="line-height: 50px">
                  <el-switch
                      v-model="value"
                      size="large"
                  />
                </p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="16">
                <h4 style="color: black;margin: 0 0 10px 0">摘录到百科</h4>
                <span>
                  选中回答或文章中的语句后可方便地「摘录到百科」
                </span>
              </el-col>
              <el-col :span="3" :offset="5">
                <p style="line-height: 50px">
                  <el-switch
                      v-model="value"
                      size="large"
                  />
                </p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="border: 1px solid #e9e9eb;background-color: white">
          <div style="height: 100%;padding: 20px">
            <h3 style="color: black;margin: 0 0 10px 0">常见问题</h3>
            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">偏好设置</p>
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="1.「偏好设置」是一个怎样的板块？" name="1">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp; 在「偏好设置」中，我们为用户提供了更加个性化的设置项，例如新功能体验、为图片添加水印等。<br>
                  &nbsp;&nbsp;&nbsp;&nbsp; 我们鼓励用户在「偏好设置」中选择适合自己的设置项，在使用过程中有任何建议可以通过问题反馈给我们，知乎期待和你一起成长。
                </div>
              </el-collapse-item>
            </el-collapse>

            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">其他问题</p>
            <p class="question">2.网站出现了问题？<span style="color: #1989fa">问题反馈</span></p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "PreferencesView"
}
</script>

<style scoped>
.setup{
  height: 80px;
  border-bottom: 1px solid #e9e9eb;
  padding: 20px 18px;

}
.question{
  font-size: 15px;margin: 20px 0 0 0;
  color: #8493a5;
  cursor: pointer;
  font-size: 13px;
}
.question:hover{
  color: #056DE8;
}
p{
  color: #056DE8;
  cursor: pointer;
}
.user{
  padding-left: 25px;
  color: #8493a5;
}
span{
  font-size: 14px;
}
</style>